<script setup lang="ts">
import * as THREE from 'three'

//导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
function insertThreeJs(){
    //创建场景
const scene = new THREE.Scene()
//创建相机
const camera = new THREE.PerspectiveCamera(
    45,//视角
    window.innerWidth / window.innerHeight,//相机宽高比
    0.1,//近平面
    1000)//原平面

    //创建渲染器
    const renderer=new THREE.WebGLRenderer()
    const dom= document.getElementById('test01')
    renderer.setSize(dom.offsetWidth,dom.offsetHeight) //渲染器画布大小
   dom.appendChild(renderer.domElement)


    //创建几何体
    const geometry=new THREE.BoxGeometry(1,1,1)
    // 创建材质
    const material=new THREE.MeshBasicMaterial({color:0x00ff00})
    //创建网格
    const cube=new THREE.Mesh(geometry,material)

    //添加到场景
    scene.add(cube)

    //设置相机位置
    camera.position.z=5
    camera.position.y=2
    camera.position.x=2
    //相机看向哪里
    camera.lookAt(0,0,0)

    //添加世界坐标辅助器
    const axesHelper = new THREE.AxesHelper(5);
    scene.add( axesHelper );
    //添加轨道控制器
    const controls=new OrbitControls(camera,renderer.domElement)
    //设置带阻尼
    controls.enableDamping=true

    //设置阻尼系数
    controls.dampingFactor=0.05
    //设置旋转速度
    controls.autoRotateSpeed=0.5
  //设置旋转速度
    controls.autoRotate=true
    //渲染函数
    function animate(){
        controls.update()
       // 下一针继续调用animate
        requestAnimationFrame(animate)
        cube.rotation.x+=0.01
        cube.rotation.y+=0.01
        renderer.render(scene,camera)
    }
    //渲染
    renderer.render(scene,camera)
    
    animate()
}

    // document.body.appendChild(renderer.domElement)
    setTimeout(()=>{
       insertThreeJs()
    },0)
   
</script>

<template>
  <div id="test01"></div>
</template>

<style scoped>
#test01 {
  height: 100%;
  width: 100%;
  color: white;
  background-color: black;
}
</style>
